<template>
  <div class="container">
    <div class="header">
      <van-nav-bar title="商品详情" left-text="返回" right-text left-arrow fixed @click-left="onClickLeft"/>
    </div>
    <div class="content">
      <div class="banner">
        <van-swipe :autoplay="3000" indicator-color="white" v-if="images.success==true">
          <van-swipe-item v-for="(item,index) in images.data" :key="index">
            <img :src="item.imageUrl" alt="">
          </van-swipe-item>
        </van-swipe>
        <div v-else class="img">
          <img :src="imgUrl" alt="">
        </div>
      </div>
      <div v-for="(i,index) in initList" v-if="Id==i.id">
      <div class="title">{{i.name}}</div>
        <div class="news" v-if="i.goods_spec_format[1]">
          {{i.goods_spec_format[0].value[0].spec_name}}：{{i.goods_spec_format[0].value[0].spec_value_name}}
        </div>
      <div class="price">￥{{i.price}}/人</div>
      <div class="prompt">
        <div>
          <div class="promptText">须知说明</div>
          <div class="card">
            <div>有效期：</div>
            <div v-html='i.detail' class="card_con">{{i.detail}}</div>
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="right" @click.stop="showPop()">立即抢购</div>
      </div>
    </div>
    </div>
    <van-popup v-model="show" position="bottom">
      <div class="popContent">
        <div class="selectNum">
          <div class="left">选择数量</div>
          <div class="right">
            <img src="../../assets/images/reduce2.png" alt @click="reduceNum">
            <span>{{formData.goodsNum}}</span>
            <img src="../../assets/images/add2.png" alt @click="addNum">
          </div>
        </div>
        <div class="btn" @click="toBuy()">立即抢购</div>
      </div>
    </van-popup>

  </div>
</template>
<script>
  import Vue from "vue";
  import { Lazyload } from "vant";
  Vue.use(Lazyload);
  export default {
    name: "details_of_attractions",
    data() {
      return {
        show: false,
        formData: {
          goodsNum: 1,
          catering_Id: ""
        },
        initList: [],
        Id:this.$route.query.Id,
        images:[],
        imgUrl:this.$route.query.imgUrl,
        orderNum:'',
        orderText:'旅游景点订单号'
      };
    },
    mounted() {
      this.getInitData();
      this.getImg()
    },
    methods: {
      //返回
      onClickLeft() {
        this.$router.back();
      },
      //初始化轮播图片
      async getImg() {
        let params = {
          product_id: this.Id
        };
        const res = await this.$axios.post(this.$api.travelDetailsImg, params);
        if (res.success) {
          this.images=res;
        } else {
          // this.$toast(res.msg);
        }
      },
      //立即抢购
      async toBuy(){
        let params = {
          product_id: this.Id,
          product_num: this.formData.goodsNum
        };
        const res = await this.$axios.post(this.$api.toBuyOrder, params);
        if (res.success) {
          this.orderNum = res.data.order_num;
          this.payMethod()
        }else {
          this.$toast(res.msg);
        }
      },
      //支付
      payMethod() {
        var token = this.$cookies.get("token")||localStorage.getItem('token');

        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        let params = {
          orderNum:this.orderNum,
          orderText:this.orderText,
        };
        if(!token){
          if (isAndroid) {
            console.warn("ecologylogin");
          } else if (isiOS) {
            window.webkit.messageHandlers.goBackLogin.postMessage(null);
          }
        }else {
          if (isAndroid) {
            console.warn('pay:'+this.orderNum);
          } else if (isiOS) {
            window.webkit.messageHandlers.tourismPayment.postMessage(params);
          }
        }


      },
      //加数字
      addNum() {
        this.formData.goodsNum++;
      },
      //减数字
      reduceNum() {
        if (this.formData.goodsNum > 1) {
          this.formData.goodsNum--;
        }
      },
      //显示支付弹窗
      showPop() {
        this.show = true;
      },
      //初始化页面
      async getInitData() {
        let params = {
          scenicSpotId: this.$route.query.scenicSpotId
        };
        const res = await this.$axios.post(this.$api.travelDetailsData, params);
        if (res.success) {
          this.initList=res.data;
          this.initList.forEach((i, index) => {
            if (typeof i.goods_spec_format=="string") {
              i.goods_spec_format = JSON.parse(i.goods_spec_format);
            }
          });
        } else {
          this.$toast(res.msg);
        }
      }
    }
  };
</script>
<style  scoped>
  .container {
    padding-top: 0.46rem;
    padding-bottom: 0.8rem;
    background-color: #f7f7f7;
    height: 100vh;
  }
  .banner {
    margin: 0.15rem 4%;
    width:92%;
    height: 100%;
  }
  .van-swipe__indicators{
    bottom: 0.2rem;
  }
  .van-swipe {
    border-radius: 8px;
    box-shadow: 0 3px 18px 0px rgba(0, 0, 0, 0.6);
    height: 1.76rem;
    width: 100%;
  }
  .img{
    border-radius: 8px;
    box-shadow: 0 3px 18px 0px rgba(0, 0, 0, 0.6);
    height: 1.76rem;
  }
  .img img, .van-swipe-item img{
    width: 100%;
    height: 100%;
  }
  .title {
    padding: 0 0.15rem;
    font-size: 0.16rem;
    color: #333333;
    margin-top: 0.1rem;
  }
  .news{
    padding: 0 0.15rem;
    font-size: 0.13rem;
    color: #8c8c8c;
    margin-top: 0.05rem;
  }
  .price {
    padding: 0 0.15rem;
    font-size: 0.16rem;
    color: #f44736;
    margin-top: 0.06rem;
  }
  .prompt {
    margin-top: 0.15rem;
    padding: 0 0.15rem 0.4rem;
  }
  .prompt > div {
    background: #fff;
    border-radius: 8px;
    padding: 0.1rem 0.15rem;
    font-size: 0.15rem;
    color: #333333;
  }
  .prompt .promptText {
    border-bottom: 1px solid #f7f7f7;
    padding-bottom: 0.06rem;
  }
  .prompt .card {
    padding-top: 0.05rem;
    padding-bottom: 0.2rem;
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.6rem;
    background: #fff;
    display: flex;
    display: -webkit-flex;
    align-items: center;
  }
  .footer .right {
    background: #00bf47;
    height: 100%;
    width: 100%;
    color: #fff;
    font-size: 0.16rem;
    text-align: center;
    line-height: 0.6rem;
  }
  .card_con {
    overflow: hidden;
  }
  ul{padding: 0!important;}
  table{width: 100%!important;}


  .popContent {
    height: 1.8rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: column;
  }
  .popContent .date {
    width: 80%;
    height: 0.5rem;
    background: #f2f2f2;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.15rem;
    border-radius: 0.05rem;
  }
  .popContent .selectNum {
    width: 80%;
    height: 0.5rem;
    background: #f2f2f2;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.15rem;
    border-radius: 0.05rem;
  }
  .popContent .selectNum .right {
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
    align-items: center;
  }
  .popContent .selectNum .right img {
    width: 0.18rem;
  }
  .popContent .selectNum .right span {
    padding: 0 0.2rem;
  }
  .popContent .btn {
    width: 80%;
    height: 0.5rem;
    border-radius: 0.5rem;
    background: #00bf46;
    color: #fff;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
  }
</style>





